import React, { Component } from 'react'
import { connect } from 'react-redux'
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup.js'
import './menu.less'

const MENU = [
  {
    title: '第三方组件',
    url: '/third',
    children: [
      {
        title: 'AntDesign',
        url: '/third/antd'
      },
      {
        title: 'wangEditor',
        url: '/third/wangeditor'
      },
      {
        title: 'UEditor',
        url: '/third/ueditor'
      },
      {
        title: 'testInput',
        url: '/third/testInput'
      }
    ],
    routes: []
  },
  {
    title: '我的组件',
    url: '/my',
    children: [
      {
        title: 'drawer',
        url: '/my/drawer'
      },
      {
        title: 'modal',
        url: '/my/modal'
      }
    ],
    routes: []
  }
]
@connect( // 功能同 UTIL/createContainer
  ({ userData }) => ({ userData }),
  require('ACTION/user').default
)
export default class Menu extends Component {
  constructor(props) {
    super(props)
    this.displayName = 'Menu'
    this.state = {
      menu: MENU,
      index: ''
    }
  }
  // 点击菜单栏每一项
  handleDrop(item) {
    if (item.children && item.children.length != 0) {
      this.setState({
        index: item.children[0]
      })
      this.props.history.replace(item.children[0].url)
    } else {
      this.setState({
        index: item
      })
      this.props.history.replace(item.url)
    }
  }
  // 1级菜单样式：判断是否被选中或选中其children
  checkActiveItem1(item) {
    var { index } = this.state
    var { pathname } = this.props.location
    if (item.url == index.url && pathname.match(index.url)) {
      return true
    } else {
      var i = item.children.length
      var j = item.routes.length
      if (item.children.length != 0) { // 看children中的子页面
        while (i--) {
          if (item.children[i].url == index.url && pathname.match(index.url)) {
            return true
          }
        }
      }
      if (item.routes.length != 0) { // 看routes中的子页面
        while (j--) {
          if (pathname.match(item.routes[j].url)) {
            return true
          }
        }
      }
      return false
    }
  }
  // 2级菜单样式：判断是否被选中
  checkActiveItem2(child) {
    var { index } = this.state
    var { pathname } = this.props.location
    return child.url == index.url && pathname.match(index.url) ? {backgroundColor: '#3399CC'} : {}
  }
  // 初始化：根据URL判断菜单展开和选中状态
  componentDidMount() {
    var { pathname } = this.props.location
    var { menu } = this.state
    menu.forEach((item, i)=>{
      if (pathname == item.url) {
        this.setState({
          index: item
        })
      } else {
        item.children.forEach((child, i)=>{
          if (pathname.match(child.url)) {
            this.setState({
              index: child
            })
          }
        })
      }
    })
  }
  render() {
    var { menu } = this.state
    return <div className="tederen-menu">
      <div className="header">
        {/* <img className="logo" src={ require('ASSET/img/logo.png') } alt="logo"/> */}
        <a className="title" href="#/">Wave React</a>
        <div className="right-option">
          <span className="user">您好，admin</span>
          <span className="line">|</span>
          <a href="#/changepwd">修改密码</a>
          <a href="#/login">退出</a>
        </div>
      </div>
      <div className="menu-list">
        {
          menu.map((item, i)=>{
            return <div key={i} className="item1">
              <div className="item_1" style={this.checkActiveItem1(item) ? {backgroundColor: '#3399CC'} : {}}
               onClick={this.handleDrop.bind(this, item)}>
                <span>{item.title}</span>
                {
                  item.children.length == 0 ? null :
                  <i className="ion-ios-arrow-left"
                    style={this.checkActiveItem1(item) ? {transform: 'rotate(-90deg)'} : {}}>
                  </i>
                }
              </div>
              <div className="item2" style={this.checkActiveItem1(item) ? {height: item.children.length * 40} : {height: 0}}>
                {
                  item.children.map((child, i)=>{
                    return <div className="item_2" style={this.checkActiveItem2(child)}
                    onClick={this.handleDrop.bind(this, child)}>{child.title}</div>
                  })
                }
              </div>
            </div>
          })
        }
      </div>
      <div className="main">
        <ReactCSSTransitionGroup
          component="div"
          transitionName="router"
          transitionEnterTimeout={300}
          transitionLeaveTimeout={100}
        >
        {React.cloneElement(this.props.children, {
          key: this.props.location.pathname
        })}
        </ReactCSSTransitionGroup>
      </div>
    </div>
  }
}
